<!--  -->
<template>
  <div>
      <div class="concat">
          <div class="concat_title">
              <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">猜你喜欢
          </div>
          <div class="concat_min">
              <ul>
                  <li v-for="(item, index) in likeList" :key="index" @click="toArticle(item.imgUrl,item.title)">
                      <div class="min_left">
                          <img :src="item.imgUrl" alt="">
                        <div class="dingwei">
                            随时买用
                        </div>
                    </div>
                      <div class="min_right">
                          <div class="r_title">{{item.title}}</div>
                          <div class="pinlun">
                              <span class="sone"><i class="iconfont">&#xe642;</i><i class="iconfont">&#xe642;</i><i class="iconfont">&#xe642;</i><i class="iconfont">&#xe642;</i><i class="iconfont">&#xe642;</i></span>
                              <span class="stwo">{{item.msg}} 条评论</span>
                          </div>
                          <div class="jiage">
                              <span class="s1"><a href="">￥<i>{{item.pre}}</i></a>起</span>
                              <span class="s2">{{item.map}}</span>
                          </div>
                          <div class="detail">
                              敢于森林之王近距离接触吗？
                          </div>
                      </div>
                  </li>
              </ul>
              <div class="chanpin">查看所有产品</div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:[
        "likeList"
    ],
  data () {
    return {
    };
  },
  methods:{
      toArticle(iteigm,imgtext){
         this.$router.push({path:"/article",query:{text:iteigm,concat:imgtext}})
      }
  }
}

</script>
<style scoped=""  lang="scss" type="text/css">
    .chanpin{
        width: 100%;
        height: 1.06666666rem;
        color: #00afc7;
        font-size: 14px;
        text-align: center;
        line-height: 1.06666666rem;
    }
    .concat{
        width: 100%;
        height: auto;
    }
    .concat_title{
        width: 100%;
        height: 1.333333rem;
        line-height: 1.333333rem;
        font-size: 0.42rem;
        img{
            width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.2766666666rem;
        margin-right: .13333333rem;
        }
    }
    .concat_min{
        width: 100%;
        height: auto;
        ul{
            width: 100%;
            li{
                width: 100%;
                display: flex;
                padding: 0.2666666rem 0;
                padding-bottom: 0.2666rem;
                border-bottom: solid 0.02666666666px rgb(221, 219, 219);
                .min_left{
                    margin-left: 0.2666666rem;
                    position: relative;
                    img{
                        width: 2.66666666rem;
                        height: 2.666666rem;
                    }
                    .dingwei{
                        position: absolute;
                        width: 1.36rem;
                        height: 0.50666666rem;
                        line-height: 0.50666666rem;
                        background: url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png);
                        background-size: cover;
                        top: 0;
                        color: #fff;
                        font-size: 0.32rem;
                    }
                }
                .min_right{
                    width: 100%;
                    margin-left: 0.26666666rem;
                    .r_title{
                        font-size: .42rem;
                        color: #212121;
                        margin-top: 0.366666rem;
                    }
                    .pinlun{
                        .sone{
                            i{
                                color: #ffb436;
                                font-size: .32rem;
                            }
                        }
                        .stwo{
                            font-size: .32rem;
                            color: #616161;
                        }
                    }
                    .detail{
                        font-size: 12px;
                        color: #f55;
                        padding-top: .48rem;
                        margin-left: .24rem;
                    }
                    .jiage{
                        height: 0.613333rem;
                        line-height: 0.613333rem;
                        margin-top: 0.2666666rem;
                        .s1{
                            color: #616161;
                            font-size: .32rem;
                            a{
                                color: #ff8300;
                                text-decoration: none;
                                font-size: .32rem;
                                i{
                                     font-style:normal;
                                     font-size: .5rem;
                                }
                            }
                        }
                        .s2{
                            float: right;
                            font-size: .32rem;
                            color: #616161;
                            margin-right: 0.26666666rem;
                        }
                    }
                }
            }
        }
    }
</style>